<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/head.css">
    <link rel="stylesheet" type="text/css" href="./css/conter.css">
    <link rel="stylesheet" type="text/css" href="./css/footer.css">
	<script src="./js/echarts.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <title>Document</title>
</head>
<body>
	<!-- 头部 -->
    <div class="head">
        <div class="head_box">
			<div class="box_1">
				<div class="logo">logo</div>
				<div class="logo right">
					<div class="icon">
						<img src="./img/设置.png" alt="">
					</div>
					<div class="icon">
						<img src="./img/消息.png" alt="">
					</div>
					<div class="logo out">logo out</div>
				</div>
			</div>
        </div>
    </div>
	
	
	<!-- 中部  导航 -->
	<div class="conter_box">
		<div class="conter_head">
			<div class="conter_head_l">
				Audience Overview <br />
				<span style="font-size:12px; color: #9c9c9c;">Roseville,CA</span>
			</div>
			
			<input type="radio" name="chk" id="chk1">
			<input type="radio" name="chk" id="chk2">
			<input type="radio" name="chk" id="chk3">
			<input type="radio" name="chk" id="chk4">
			<input type="radio" name="chk" id="chk5">
			<div class="conter_head_r">
				<ul class="li1">
				    <li>
						<label for="chk1">
							<p>DASHBOARD</p>
						</label>
					</li>
					<li>
						<label for="chk2">
							<p>PROJECTS</p>
						</label>
					</li>
					<li>
						<label for="chk3">
							<p>CALENDER</p>
						</label>
					</li>
					<li>
						<label for="chk4">
							<p>MAILDOX</p>
						</label>
					</li>
					<li>
						<label for="chk5">
							<p>SETTINGS</p>
						</label>
					</li>
					<div class="huakuai"></div>
				</ul>
			</div>
		</div>
		
		<!-- 轮播 -->
		<div class="conter_box_2">
			
			<div class="lunbo">
				<div class="box">
				
					<ul class="one">
						<li>
							<img src="./img/1.jpeg" alt="">
						</li>
						<li>
							<img src="./img/2.jpeg" alt="">
						</li>
						<li>
							<img src="./img/1.jpeg" alt="">
						</li>
						<li>
							<img src="./img/2.jpeg" alt="">
						</li>
						<!-- <li>
				        图片5
				    </li> -->
					</ul>
					<ul class="twe">
						<li>
						</li>
						<li>
						</li>
						<li>
						</li>
						<li>
						</li>
					</ul>
					<div class="jiantou_left">
						<img src="./img/左箭头.png" alt="">
					</div>
					<div class=" jiantou_right">
						<img src="./img/右箭头.png" alt="">
					</div>
				</div>
			</div>
			
			<div class="supoort">
				<div class="supoort_head">
					<div class="supoort_text">Supoort Requests</div>
					<div class="supoort_button">View All</div>
				</div>
				
				<div class="supoort_from">
					<div class="time">
						<div class="time_head">TIME</div>
						<div class="time_1">9:15pm</div>
						<div class="time_1">9:45pm</div>
					</div>
					<div class="time">
						<div class="time_head">USER MANE</div>
						<div class="time_1">info@design.com</div>
						<div class="time_1">info@design.com</div>
					</div>
					<div class="time"></div>
					<div class="time"></div>
					<div class="time status">
						<div class="time_head">STATUS</div>
						<div class="time_2">solved</div>
						<div class="time_2">solved</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	
	<!-- echarts图表 -->
		<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
	<div id="main" style="width: 80%;height:400px;margin: 20px auto;background-color: white;padding-top: 30px;"></div>
	<div style="width: 80%; height: 400px;margin: 20px auto;display: flex;justify-content: space-between;">
		<div id="main11" style="width: 49%;height:350px;padding-top: 30px;background-color: white;"></div>
		<div id="main22" style="width: 49%;height:350px;padding-top: 30px;background-color: white;"></div>
	</div>
	
	
	<!-- 底部 -->
	<div class="footer">
		<div class="footer_box">
			<div class="footer_box_mini">
				<div class="logo" >logo</div>
			</div>
			<div class="footer_box_mini">
				<div class="footer_text">NEWS</div>
				<div class="footer_text">CHANNELS</div>
				<div class="footer_text">OVERVIEW</div>
				<div class="footer_text">TIMELINE</div>
			</div>
			<div class="footer_box_mini">
				<div class="footer_text">SPORT</div>
				<div class="footer_text">CULTULRE</div>
				<div class="footer_text">NATURE</div>
				<div class="footer_text">MUSIC</div>
			</div>
			<div class="footer_box_mini">
				<div class="footer_text">WEATHER</div>
				<div class="footer_text">AUTOS</div>
				<div class="footer_text">LOCAL</div>
				<div class="footer_text">SHOP</div>
			</div>
			<div class="footer_box_mini">
				<div class="footer_text">FUTURE</div>
				<div class="footer_text">FOOD</div>
				<div class="footer_text">EARTH</div>
				<div class="footer_text">TV</div>
			</div>
			<div class="footer_box_mini">
				<div class="footer_text">TRAVEL</div>
				<div class="footer_text">RADIO</div>
			</div>
			<div class="footer_box_mini"></div>
		</div>
	</div>
	
</body>
</html>
	<script src="./js/lunbo.js"></script>
	
	<script>
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		var myChart11 = echarts.init(document.getElementById('main11'));
		var myChart22 = echarts.init(document.getElementById('main22'));
		// 指定图表的配置项和数据
		$.get('https://edu.telking.com/api/?type=month', function(res) {
			option = {
				title: {
					text: '曲线图数据展示',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				xAxis: {
					type: 'category',
					data: res.data.xAxis
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: res.data.series,
					type: 'line',
					smooth: true
				}]
			};
			myChart.setOption(option);
		});
		
		$.get('https://edu.telking.com/api/?type=week', function(res) {
			let data_arr = [];
			for (var i = 0; i < res.data.xAxis.length; i++) {
				let ar = {
					value: res.data.series[i],
					name: res.data.xAxis[i]
				}
				data_arr.push(ar)
			}
			console.log(data_arr);
			option11 = {
				title: {
					text: '饼状图数据展示',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				// legend: {
				//   orient: 'vertical',
				//   left: 'left'
				// },
				series: [{
					name: 'Access From',
					type: 'pie',
					radius: '50%',
					data: data_arr,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			}
			myChart11.setOption(option11);
		});
		
		
		
		$.get('https://edu.telking.com/api/?type=week', function(week) {
			option22 = {
				title: {
					text: '柱状图数据展示',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				xAxis: {
					type: 'category',
					data: week.data.xAxis
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: week.data.series,
					type: 'bar'
				}]
			};
			myChart22.setOption(option22);
		})
		
	</script>
